<!DOCTYPE html>
<html>
<head>
  <title>个人书签</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="https://i.postimg.cc/hvq33fz8/75952f56606a4af7866be06420ca51d2.png">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <style>
    .bgmc{
      background-color: #2d3748;
      color: #edf2f7;
      position: fixed;
      top: 0;
      z-index: 2;
    }
    body {
        background-color: #edf2f7;
    }
    .resource-content-desc {
      color: #718096;
      font-size: 13px;
    }
    .resource-content-title {
      color: #1a202c;
      margin-top: 12px;
      font-size: 18px;
    }
    .resource-url {
      font-size: 12px;
    }
    .resource-main {
      border-radius: 18px 18px 0 0;
      border-width: 0;
      /* transition: all .3s; */
    }
    .hover-move:hover  {
      /* transform: translateY(-10px); */
    }
    .card-body {
      box-shadow: rgb(0 0 0 / 10%) 0px 20px 25px -5px, rgb(0 0 0 / 4%) 0px 10px 10px -5px;
    }
    .hover-move:hover{
      animation:hvr-wobble-vertical 1s 1;
      -moz-animation:hvr-wobble-vertical 1s 1; /* Firefox */
      -webkit-animation:hvr-wobble-vertical 1s 1; /* Safari and Chrome */
      -o-animation:hvr-wobble-vertical 1s 1; /* Opera */
      cursor: pointer;
    }
    
    .bg-bmc {
      padding-bottom: 20px;
      padding-top: 72px;
    }
    /* Wobble Horizontal */
@keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

 /* Underline From Center */
.card-body {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* box-shadow: 0 0 1px rgba(0, 0, 0, 0); */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.card-body:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: #929fad;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.card-body:hover:before, .card-body:focus:before, .card-body:active:before {
  left: 0;
  right: 0;
}
#style-3::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px #edf2f7;
	background-color: #edf2f7;
}

#style-3::-webkit-scrollbar
{
	width: 6px;
	background-color: #edf2f7;
}

#style-3::-webkit-scrollbar-thumb
{
	background-color: rgba(0,0,0,0.1);
}
  </style>
</head>
<body id="style-3">

<div class="container-fluid p-3 bgmc">
  <h5>
    <svg t="1649499387851" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6548" width="32" height="32"><path d="M853.333333 85.333333H256C183.466667 85.333333 128 140.8 128 213.333333v597.333334c0 72.533333 55.466667 128 128 128h640V128c0-25.6-17.066667-42.666667-42.666667-42.666667z m-42.666666 768H277.333333c-34.133333 0-64-29.866667-64-64S243.2 725.333333 277.333333 725.333333H810.666667v128z m0-213.333333H277.333333c-21.333333 0-42.666667 4.266667-64 12.8V213.333333c0-25.6 17.066667-42.666667 42.666667-42.666666h170.666667v341.333333l149.333333-85.333333 149.333333 85.333333V170.666667h85.333334v469.333333z" p-id="6549" fill="#d3d8df"></path></svg> 
    BOOKMARK

  </h5>
</div>
  
<div class="container bg-bmc">
  <div class="row" id="cardBox">
    
  </div>
</div>
<script> 
  //改版测试
  var xhr = new XMLHttpRequest();
 
  xhr.onload = function () {
    // 输出接收到的文字数据
    setDom(xhr.responseText);
  }
  
  xhr.onerror = function () {
    console.log("请求出错");
  }
  
  // 发送异步 GET 请求
  xhr.open("GET", "https://cfffed3a8d244c63899ac78c12abcf41.apig.cn-south-1.huaweicloudapis.com/serverAction/getmarkdata", true);
  xhr.send();



  function setDom(dataStr){
    var boot_data = JSON.parse(dataStr);
	boot_data.reverse();
    // var data = JSON.parse(boot_data[0].content);
    //console.log(boot_data) 
    boot_data.forEach(getDom);
    document.getElementById("cardBox").innerHTML = cardArry.join("");
  }
  var cardArry = [];
  function getDom(item, index){
    cardArry.push('<div class="col-sm-12 col-lg-3 mt-4 hover-move">');
    cardArry.push('<div class="card resource-main">');
    cardArry.push('<div class="card-body"><div class="row">');
    cardArry.push('<div class="col-lg-12 col-3"><img src="'+item.imgurl+'" class="rounded-circle" lt="Cinque Terre" width="60" height="60"></div> ');
    cardArry.push('<div class="col-lg-12 col-7"><h4 class="card-title resource-content-title">'+item.webName+'</h4>');
    cardArry.push('<p title="'+item.webAbout+'" class="text-truncate resource-content-desc"><small>'+item.webAbout+'</small></p></div>');
    cardArry.push('<a href="'+item.webAddress+'" class="link-secondary resource-url"  target="_blank">'+item.webAddress+'</a>');
    cardArry.push('<div>');
    cardArry.push('<span class="badge bg-light text-dark">'+item.webDark+'</span>');
    cardArry.push('</div>');
    cardArry.push('</div>');
    cardArry.push('</div>');
    cardArry.push('</div>');
    cardArry.push('</div>');
  }
  //提交测试修改测试
</script>
</body>
</html>